<template>
  <div style="width: 100%; height: 100%;">
    <div ref="earthContainer" style="width: 100%; height: 100%;"></div>
  </div>
</template>

<script>
/* eslint-disable */
var EarthComp = {
  data() {
    return {
      message: '页面加载于 ' + new Date().toLocaleString(),
      _earth: undefined, // 注意：Earth和Cesium的相关变量放在vue中，必须使用下划线作为前缀！
      imageAlpha: 1.0,
      position: [0, 0, 0],
      level: '',
      show: false,
      lon: 0,
      lat: 0,
    }
  },
  // 1.1 资源创建
  mounted() {
    // 1.1.1 创建地球
    var earth = new XE.Earth(this.$refs.earthContainer)
    XE.MVVM.bindPosition(this, 'position', earth.camera, 'position')

    this._earth = earth //下划线
    this.$root._earth = earth //全局
    window._earth = earth //控制台显示
    this.$axios
      .get('./scene.json')
      .then((res) => {
        earth.xbsjFromJSON(res.data)
        this.$bus.emit('earthInit')
      })
      .catch((err) => {
        console.log(err)
      })
  },
  // 1.2 资源销毁
  beforeDestroy() {
    // vue程序销毁时，需要清理相关资源
    this._earth = this._earth && this._earth.destroy()
  },
}

export default EarthComp
</script>
<style scoped></style>
